<script>

export const Props = {
  title: {
    type: String,
    default: '提示'
  },
  width: {
    default: '40%'
  },
  visible: {
    type: Boolean,
    required: true,
    default: false
  },

  beforeClose: {
    type: Function,
    default: (close) => {
      console.log('flag')
      close(true)
    }
  },

  confirmText: {
    default: '确 定'
  },
  confirmBtnLoading: {
    type: Boolean,
    default: false
  },
  confirmBtnDisabled: {
    type: Boolean,
    default: false
  },

  showCancelBtn: {
    type: Boolean,
    default: true
  },

  cancelText: {
    default: '取 消'
  },
  cancelBtnDisabled: {
    type: Boolean,
    default: false
  }

}

export default {
  components: {
  },
  props: {
    ...Props
  },
  data() {
    return {

    }
  },
  computed: {
    attrs() {
      const attrs = { ...this.$attrs }
      attrs['ref'] = 'form'
      return attrs
    },
    listeners() {
      const listeners = { ...this.$listeners }

      return listeners
    },
    hasFooterSlot() {
      return this.$slots.footer !== undefined
    },
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm')
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<template>
  <el-dialog
    :title="title"
    :width="width"
    v-bind="attrs"
    :visible.sync="dialogVisible"
    :before-close="beforeClose"
  >
    <slot
      v-bind="attrs"
      v-on="listeners"
    />
    <div
      slot="footer"
      class="dialog-footer"
    >
      <slot
        v-if="hasFooterSlot"
        slot="footer"
        name="footer"
      />

      <template v-else>
        <el-button
          v-if="showCancelBtn"
          :disabled="cancelBtnDisabled"
          @click="handleCancel"
        >
          {{ cancelText }}
        </el-button>

        <el-button
          type="primary"
          :loading="confirmBtnLoading"
          :disabled="confirmBtnDisabled"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </el-button>
      </template>
    </div>
  </el-dialog>
</template>

<style lang="scss"></style>
